2025年9月26日日本語

カスタムフックでReactにおけるステートマシンの力を解き放ちましょう。複雑なロジックを抽象化し、コードの保守性を向上させ、堅牢なアプリケーションを構築する方法を学びます。

Reactカスタムフックとステートマシン：複雑なステートロジックの抽象化をマスターする

Reactアプリケーションの複雑さが増すにつれて、ステートの管理は大きな課題となることがあります。従来のuseStateやuseEffectを使用するアプローチでは、特に複雑なステート遷移や副作用を扱う場合、すぐにロジックが絡み合い、保守が困難なコードになりがちです。ここでステートマシン、特にそれを実装するReactカスタムフックが役立ちます。この記事では、ステートマシンの概念、Reactでカスタムフックとして実装する方法、そしてグローバルなユーザーに向けてスケーラブルで保守性の高いアプリケーションを構築するためにステートマシンが提供する利点についてご紹介します。

ステートマシンとは？

ステートマシン（または有限ステートマシン、FSM）は、有限数のステートとそれらの間の遷移を定義することにより、システムの振る舞いを記述する計算の数学的モデルです。フローチャートに似ていますが、より厳密なルールとより正式な定義があります。主な概念は以下の通りです。

ステート：システムの異なる状態またはフェーズを表します。
遷移：特定のイベントまたは条件に基づいて、システムが1つのステートから別のステートにどのように移動するかを定義します。
イベント：ステート遷移を引き起こすトリガーです。
初期ステート：システムが開始するステートです。

ステートマシンは、明確に定義されたステートと明確な遷移を持つシステムのモデリングに優れています。実世界のシナリオには多くの例があります。

信号機：赤、黄、緑のようなステートをタイマーによって遷移します。これは世界中で認識されている例です。
注文処理：eコマースの注文は、「保留中」、「処理中」、「発送済み」、「配達済み」のようなステートを遷移する可能性があります。これはオンライン小売業に普遍的に適用されます。
認証フロー：ユーザー認証プロセスには、「ログアウト済み」、「ログイン中」、「ログイン済み」、「エラー」のようなステートが含まれる場合があります。セキュリティプロトコルは、一般的に国境を越えて一貫しています。

Reactでステートマシンを使用する理由

Reactコンポーネントにステートマシンを統合すると、いくつかの魅力的な利点が得られます。

コードの整理：ステートマシンはステート管理に対する構造化されたアプローチを強制し、コードをより予測可能で理解しやすくします。もはやスパゲッティコードではありません！
複雑さの軽減：ステートと遷移を明示的に定義することで、複雑なロジックを簡素化し、意図しない副作用を回避できます。
テスト容易性の向上：ステートマシンは本質的にテスト可能です。各ステートと遷移をテストすることで、システムが正しく動作することを確認できます。
保守性の向上：ステートマシンの宣言的な性質により、アプリケーションの進化に合わせてコードの変更と拡張が容易になります。
より良い視覚化：ステートマシンを視覚化できるツールが存在し、システムの動作の明確な概要を提供し、多様なスキルセットを持つチーム間のコラボレーションと理解を助けます。

Reactカスタムフックとしてのステートマシンの実装

Reactカスタムフックを使用してステートマシンを実装する方法を説明しましょう。ここでは、idle、loading、successの3つのステートを持つボタンの簡単な例を作成します。ボタンはidleステートで開始します。クリックされると、loadingステートに遷移し、ロードプロセスをシミュレート（setTimeoutを使用）し、その後successステートに遷移します。

1. ステートマシンの定義

まず、ボタンステートマシンのステートと遷移を定義します。


const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // After 2 seconds, transition to success
      },
    },
    success: {},
  },
};

この設定は、ライブラリに依存しない（XStateに触発されていますが）アプローチを使用してステートマシンを定義します。この定義を解釈するロジックは、カスタムフック内で自分で実装します。initialプロパティは初期ステートをidleに設定します。statesプロパティは可能なステート（idle、loading、success）とその遷移を定義します。idleステートには、CLICKイベントが発生したときにloadingステートへの遷移を定義するonプロパティがあります。loadingステートは、afterプロパティを使用して、2000ミリ秒（2秒）後に自動的にsuccessステートに遷移します。この例では、successステートは終端ステートです。

2. カスタムフックの作成

次に、ステートマシンロジックを実装するカスタムフックを作成しましょう。


import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

このuseStateMachineフックは、ステートマシン定義を引数として取ります。useStateを使用して現在のステートとコンテキスト（コンテキストについては後で説明します）を管理します。transition関数はイベントを引数として受け取り、ステートマシン定義で定義された遷移に基づいて現在のステートを更新します。useEffectフックはafterプロパティを処理し、指定された期間後に自動的に次のステートに遷移するためのタイマーを設定します。このフックは、現在のステート、コンテキスト、およびtransition関数を返します。

3. コンポーネントでカスタムフックを使用する

最後に、Reactコンポーネントでカスタムフックを使用しましょう。


import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // After 2 seconds, transition to success
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    
  );
};

export default MyButton;

このコンポーネントは、useStateMachineフックを使用してボタンのステートを管理します。handleClick関数は、ボタンがクリックされたときに（そしてidleステートの場合のみ）CLICKイベントをディスパッチします。コンポーネントは現在のステートに基づいて異なるテキストをレンダリングします。複数回のクリックを防ぐため、ロード中はボタンが無効になります。

ステートマシンにおけるコンテキストの扱い

多くの実際のシナリオでは、ステートマシンはステート遷移間で永続化するデータを管理する必要があります。このデータはコンテキストと呼ばれます。コンテキストを使用すると、ステートマシンが進行するにつれて関連情報を保存および更新できます。

ボタンの例を拡張して、ボタンが正常にロードされるたびにインクリメントされるカウンターを含めてみましょう。ステートマシン定義とカスタムフックを修正して、コンテキストを処理します。

1. ステートマシン定義の更新


const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

ステートマシン定義に初期値countが0のcontextプロパティを追加しました。また、successステートにentryアクションを追加しました。entryアクションは、ステートマシンがsuccessステートに入るときに実行されます。これは現在のコンテキストを引数として受け取り、countがインクリメントされた新しいコンテキストを返します。ここでのentryは、コンテキストを変更する例を示しています。JavaScriptのオブジェクトは参照渡しされるため、元のオブジェクトを変更するのではなく、*新しい*オブジェクトを返すことが重要です。

2. カスタムフックの更新


import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

useStateMachineフックを更新し、contextステートをstateMachineDefinition.contextで初期化するか、コンテキストが提供されていない場合は空のオブジェクトで初期化するようにしました。また、entryアクションを処理するためにuseEffectを追加しました。現在のステートにentryアクションがある場合、それを実行し、返された値でコンテキストを更新します。

3. 更新されたフックをコンポーネントで使用する


import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    
      
      Count: {context.count}
    
  );
};

export default MyButton;

コンポーネントでcontext.countにアクセスし、それを表示するようになりました。ボタンが正常にロードされるたびに、カウントがインクリメントされます。

高度なステートマシンの概念

私たちの例は比較的単純ですが、ステートマシンははるかに複雑なシナリオを処理できます。考慮すべきいくつかの高度な概念を以下に示します。

ガード：遷移が発生するために満たされなければならない条件です。例えば、ユーザーが認証されている場合、または特定のデータ値がしきい値を超えている場合にのみ遷移が許可される場合があります。
アクション：ステートに入るとき、またはステートを終了するときに実行される副作用です。これらには、API呼び出しの実行、DOMの更新、または他のコンポーネントへのイベントのディスパッチなどが含まれます。
並列ステート：複数の同時アクティビティを持つシステムをモデル化できます。たとえば、ビデオプレーヤーは、再生コントロール（再生、一時停止、停止）用の1つのステートマシンと、ビデオ品質（低、中、高）を管理するための別のステートマシンを持つことができます。
階層ステート：他のステート内にステートをネストし、ステートの階層を作成できます。これは、多くの関連するステートを持つ複雑なシステムをモデル化する場合に役立ちます。

代替ライブラリ：XStateなど

私たちのカスタムフックはステートマシンの基本的な実装を提供しますが、プロセスを簡素化し、より高度な機能を提供する優れたライブラリがいくつかあります。

XState

XStateは、ステートマシンとステートチャートを作成、解釈、実行するための人気のあるJavaScriptライブラリです。ガード、アクション、並列ステート、階層ステートのサポートを含む、複雑なステートマシンを定義するための強力で柔軟なAPIを提供します。XStateは、ステートマシンを視覚化およびデバッグするための優れたツールも提供しています。

その他のライブラリ

その他のオプションは以下の通りです。

Robot：シンプルさとパフォーマンスに焦点を当てた軽量なステート管理ライブラリです。
react-automata：Reactコンポーネントにステートマシンを統合するために特別に設計されたライブラリです。

ライブラリの選択は、プロジェクトの特定のニーズによって異なります。XStateは複雑なステートマシンに適していますが、Robotとreact-automataはよりシンプルなシナリオに適しています。

ステートマシンを使用するためのベストプラクティス

Reactアプリケーションでステートマシンを効果的に活用するために、次のベストプラクティスを考慮してください。

小さく始める：単純なステートマシンから始めて、必要に応じて徐々に複雑さを増してください。
ステートマシンを視覚化する：視覚化ツールを使用して、ステートマシンの動作を明確に理解してください。
包括的なテストを作成する：各ステートと遷移を徹底的にテストして、システムが正しく動作することを確認してください。
ステートマシンを文書化する：ステートマシンのステート、遷移、ガード、アクションを明確に文書化してください。
国際化 (i18n) を考慮する：アプリケーションがグローバルなユーザーを対象としている場合、ステートマシンのロジックとユーザーインターフェースが適切に国際化されていることを確認してください。たとえば、ユーザーのロケールに基づいて異なる日付形式や通貨記号を処理するために、個別のステートマシンまたはコンテキストを使用します。
アクセシビリティ (a11y)：ステート遷移とUIの更新が、障害を持つユーザーにとってアクセス可能であることを確認してください。ARIA属性とセマンティックHTMLを使用して、支援技術に適切なコンテキストとフィードバックを提供します。

結論

Reactカスタムフックとステートマシンを組み合わせることで、Reactアプリケーションにおける複雑なステートロジックを管理するための強力かつ効果的なアプローチが提供されます。ステート遷移と副作用を明確に定義されたモデルに抽象化することで、コードの整理を改善し、複雑さを軽減し、テスト容易性を高め、保守性を向上させることができます。独自のカスタムフックを実装するか、XStateのようなライブラリを活用するかにかかわらず、ステートマシンをReactワークフローに組み込むことで、世界中のユーザー向けアプリケーションの品質とスケーラビリティを大幅に向上させることができます。